<template>
	<view>
		<view class="top">
			<view class="scroll">
				<checkbox-group class="container"  v-for="(friend,index) in friendlist" :key="friend.id" :data-item="friend">
					<view class="check-container">
						<checkbox :value="friend.id.toString()" :disabled="friend.flag" @tap="addSelect(index)">
							<view class="avatar-container">
								<image class="avatar" :src="friend.avatar"></image>
							</view>
							<view class="content">
								<text class="name">{{friend.nickname}}</text>
							</view>
						</checkbox>
					</view>
					
				</checkbox-group>
			</view>
			<view class="blank">
				
			</view>
		</view>
		
		<view class="footer">
			<button :class="selectNum==0?'disabled':'btn'" :disabled="selectNum==0" @tap="invite()">邀请</button>
		</view>
	</view>
</template>

<script>
	import { getMember } from 'api/user';
	import WebSocket from '@/common/websocket.js';
	import util from 'util/date';
	import dateUtil from 'util/date';
	import {mapGetters,mapActions} from 'vuex';
    export default {
        data () {
            return {
				group:{},
				friendlist:[],
				index:-1,
				seleted:[],
				members:[],
				ids:',',
				selectNum:0
            }
        },
		onLoad (options) {
			this.index = options.index;
			this.group = this.groups[options.index];
			this.getMembersInfo(this.group.id);
		
		},
		//通过计算属性可以读取并实时监听状态的变化
		computed:{
			...mapGetters(['groups','user','friends']),
		},
        methods : {
		  ...mapActions(['getRoomIndex','createNewChatRoom']),
          addSelect(index){
			  if(this.friendlist[index].flag)	return;
			  if(this.friendlist[index].seleted){
				  this.friendlist[index].seleted = false;
				  this.selectNum--;
			  }
			 else{
				this.friendlist[index].seleted = true;
				this.selectNum++;
			 }
		  },
		  invite(){
			  if(this.selectNum==0)	return;
			  //构造消息
			  let ids = '';
			  for(let i=0;i<this.friendlist.length;i++){
				  if(this.friendlist[i].seleted){
					  ids+=this.friendlist[i].id+',';
				  }
			  }
			  ids = ids.substring(0,ids.length-1);
			  let message={
			  	type:'invite-people',
			  	from:this.$store.getters.user,
			  	time:dateUtil.getTimeNow(),
				ids:ids,
			  	group:this.group
			  }
			  WebSocket.sendMessage(message);
			  
			  uni.showToast({
			  	title:'发送邀请成功！',
				icon:'success',
				duration:500
			  })
			  
			  setTimeout(()=>{
				  uni.navigateBack({
				  	animationType:'slide-out-left'
				  })
			  },500)
		  },
		  async getMembersInfo(id){
		  	const { content: res } = await getMember({
		  	  id:id
		  	});
		  	if(res=='not found'){
		  		uni.showToast({
		  			title:'获取信息失败！',
		  			icon:'error',
		  			duration:500
		  		})
		  		setTimeout(function() {
		  			uni.navigateBack({
		  				animationType:'slide-out-left'
		  			})
		  		}, 500);
		  	}else{
		  		this.members = res;
				for(let i=0;i<this.members.length;i++){
					this.ids = this.ids+this.members[i].id+',';
				}
				///排除已经在群里的好友
				for(let i=0;i<this.friends.length;i++){
					let t = {};
					t.id = this.friends[i].id;
					t.nickname = this.friends[i].nickname;
					t.avatar = this.friends[i].avatar;
					if(this.ids.indexOf(','+t.id+',')==-1){
						t.flag = false;
					}else t.flag = true;
					t.seleted=false;
					this.friendlist.push(t);
				}
		  	}
		  },
        }
    }
</script>

<style>
	.blank{
		height: 150rpx;
	}
	.check-container{
		margin-left: 20rpx;
		margin-top: auto;
		margin-bottom: auto;
	}
	.check{
		border-radius: 50%;

	}

	.footer .btn-wrap {
		width: 18%;
		margin-right: 5%;
	}
		
	.footer .btn {
		width: 96%;
		height: 80rpx;
		font-size:30rpx;
		margin-left: 2%;
		background-color: #01B4FE;
		color: #FFFFFF;
		position: fixed;
		bottom: 14rpx;
		border: 0;
		outline: none;
	}
		
	.footer .disabled {
		width: 96%;
		height: 80rpx;
		font-size:30rpx;
		margin-left: 2%;
		background-color: #cccccc;
		color: #FFFFFF;
		position: fixed;
		bottom: 14rpx;
		border: 0;
		outline: none;
	}
	.row{
		display: flex;
	}
	.middle{
		padding: 20rpx;
	}
	.title{
		font-weight: 600;
		border-radius: 10rpx;
		padding: 5rpx;
		background-color: #c2b5be;
		margin: 10rpx;
	}
	.content{
		font-weight: 500;
		margin-top: 10rpx;
		margin-left: 20rpx;
	}
    .mine{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

  
    .bottom{
		position: fixed;
		margin-bottom: 20rpx;
		/* padding-top: 100rpx;
        text-align: center;
        line-height: 200rpx; */
    }
	.logout{
		width: 266rpx;
		height: 76rpx;
		line-height: 76rpx;
		margin: 0 auto;
		background-color: #618DFF;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 32rpx;
	}
	.btn{
		margin-top: 50rpx;
		background-color: #4CD964;
		color: white;
		margin: 20rpx;
		border-radius: 15rpx;
	}
	.container{
		padding-left: 20rpx;
		border-radius: 30rpx;
		width: 100%;
		display: flex;
		margin-top: 10rpx;
		background-color: #e1e1e1;
		/* line-height: 100rpx; */
	}
	.container .content{
		display: flex;
		align-items: auto;
		flex-direction: column;
		justify-content: center;
		padding-left: 10rpx;
	}
	.container .content .name{
		text-align: left;
		margin-top: auto;
		margin-bottom: auto;
		font-weight: 1000;
		font-size: large;
	}
	.arrow{
		margin-top: auto;
		margin-bottom: auto;
		color: #8F8F94;
		margin-right: 20rpx;
		margin-left: auto;
		font-weight: 600;
	}
	.red{
		background-color: #ff0000;
	}
	.blue{
		background-color: #00aaff;
	}
	.brown{
		background-color: #ccbf08;
	}
	.avatar-container{
		position: relative;
		margin: 10rpx;
	}
	.avatar{
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}
	.content{
		display: flex;
		align-items: auto;
		flex-direction: column;
		justify-content: center;
		padding-left: 10rpx;
	}
	.name{
		text-align: left;
		margin-top: auto;
		margin-bottom: auto;
		font-weight: 1000;
		font-size: large;
	}
</style>
